<template>
    <div class="app-container">
        <el-card shadow="never">
            <el-row>
                <i class="el-icon-plus"></i>
                <span class="search-title">新增</span>
            </el-row>
            <el-row class="row-margin">
                <el-button type="primary" size="small" @click.native="handleGoToAddOrModify">
                    新增分类
                </el-button>
            </el-row>
        </el-card>
        <el-card
            v-for="item in categoryList"
            :key="item.category.id"
            class="category-container"
            :body-style="`display: ${item.open ? 'block' : 'none'}`"
        >
            <template #header>
                <el-row class="card-header" type="flex" justify="space-between">
                    <div @click="handleToggleTheCard(item.category.id)" class="toggle-button">
                        <span>
                            <i class="header-icon el-icon-s-unfold"></i>
                        </span>
                        <span>{{ item.category.name }}</span>
                        <span>
                            <el-image
                                style="width: 30px; height: 30px;"
                                fit="fill"
                                :src="item.category.imageUrl"
                            ></el-image>
                        </span>
                    </div>

                    <div>
                        <el-button
                            icon="el-icon-plus"
                            type="default"
                            size="small"
                            @click="handleOpenSmallCategoryModal($event, item.category.id)"
                            >新增小类</el-button
                        >
                        <el-button
                            icon="el-icon-edit"
                            type="default"
                            size="small"
                            @click="handleGoToAddOrModify($event, item.category.id)"
                            >修改</el-button
                        >
                        <el-button
                            icon="el-icon-delete"
                            type="default"
                            size="small"
                            @click="onDeleteCategory(item.category.id)"
                            >删除</el-button
                        >
                    </div>
                </el-row>
            </template>
            <template #default>
                <div class="card-content">
                    <el-row
                        v-for="(detail, idx) in item.detailList"
                        :key="idx"
                        class="detail-list-item"
                        type="flex"
                        justify="space-arround"
                    >
                        <span><i class="el-icon-info"></i></span>
                        <span>{{ detail.name }}</span>
                        <span
                            style="cursor:pointer"
                            @click="handleOpenSmallCountModal(detail.categoryId)"
                            >商品数量: {{ detail.goodsCount }}</span
                        >
                        <el-button
                            type="default"
                            size="mini"
                            icon="el-icon-edit"
                            @click="handleOpenSmallCategoryModal($event, item.category.id, detail)"
                            >修改</el-button
                        >
                        <el-button
                            type="default"
                            size="mini"
                            icon="el-icon-delete"
                            @click="onDeleteCategory(detail.categoryId)"
                            >删除</el-button
                        >
                    </el-row>
                </div>
            </template>
        </el-card>
        <el-dialog :visible.sync="addSmallGoodsCategoryModal" title="新增小类">
            <el-form ref="categoryFormRef" :module="categoryForm">
                <el-form-item label="分类名称" label-width="80px" prop="name">
                    <el-input maxlength="30" show-word-limit v-model="categoryForm.name"></el-input>
                </el-form-item>
            </el-form>
            <el-row slot="footer">
                <el-button type="default" @click="addSmallGoodsCategoryModal = false"
                    >取消</el-button
                >
                <el-button type="primary" @click="handleSaveAddSmallCategory">确定</el-button>
            </el-row>
        </el-dialog>
        <el-dialog :visible.sync="modifySmallGoodsCategoryModal" title="修改小类">
            <el-form ref="editCategoryFormRef" :module="editCategoryForm">
                <el-form-item label="分类名称" label-width="80px" prop="name">
                    <el-input
                        maxlength="30"
                        show-word-limit
                        v-model="editCategoryForm.name"
                    ></el-input>
                </el-form-item>
            </el-form>
            <el-row slot="footer">
                <el-button type="default" @click="modifySmallGoodsCategoryModal = false"
                    >取消</el-button
                >
                <el-button type="primary" @click="handleSaveModifySmallCategory">确定</el-button>
            </el-row>
        </el-dialog>
        <el-dialog
            :visible.sync="countTableModalVisible"
            @closed="handleOnCountModalClosed"
            title="数量详情"
            width="60%"
            destroy-on-close
        >
            <SmallCategoryCountTable :categoryId="categoryId"></SmallCategoryCountTable>
        </el-dialog>
    </div>
</template>

<script>
import {
    getGoodsCategoryList,
    deleteGoodsCategory,
    createSmallGoodsCategory,
    updateSmallGoodsCategory
} from '@/api/goodsCategory';
import { uploadImage } from '@/api/images';
import SmallCategoryCountTable from './components/smallCategoryCountTable';

export default {
    components: {
        SmallCategoryCountTable
    },
    data() {
        return {
            countTableModalVisible: false,
            categoryId: null,
            smallDetail: {
                categoryId: null,
                name: '',
                parentId: null,
                sortNo: null,
                goodsCount: null
            },
            addSmallGoodsCategoryModal: false,
            modifySmallGoodsCategoryModal: false,
            categoryList: [],
            categoryForm: {
                id: null,
                imageUrl: null,
                name: '',
                parentId: null,
                sortNo: 0
            },
            editCategoryForm: {
                id: null,
                imageUrl: null,
                name: '',
                parentId: null,
                sortNo: 0
            }
        };
    },
    created() {
        this._refresh();
    },
    methods: {
        _refresh() {
            getGoodsCategoryList().then(res => {
                if (res.data.success) {
                    res.data.data = res.data.data.map(item => {
                        return { ...item, open: false };
                    });
                    this.categoryList = res.data.data;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleChange() {},
        handleToggleTheCard(id) {
            this.categoryList = this.categoryList.map(item => {
                return item.category.id === id ? { ...item, open: !item.open } : item;
            });
        },
        handleOpenSmallCategoryModal(e, id, detail) {
            this.categoryForm.parentId = id;
            if (detail) {
                this.smallDetail = detail;
                this.editCategoryForm.id = detail.categoryId;
                this.editCategoryForm.name = detail.name;
                this.modifySmallGoodsCategoryModal = true;
            } else {
                this.addSmallGoodsCategoryModal = true;
            }
        },
        handleOpenSmallCountModal(id) {
            if (id) {
                this.categoryId = id;
                this.countTableModalVisible = true;
            } else {
                this.$message({
                    message: '未知错误！',
                    type: 'error',
                    duration: 3000
                });
            }
        },
        handleOnCountModalClosed() {
            this._refresh();
        },
        handleGoToAddOrModify(e, id) {
            if (id) {
                this.$router.push({
                    name: 'updateCategory',
                    params: {
                        id
                    }
                });
            } else {
                this.$router.push('addCategory');
            }
        },
        onDeleteCategory(id) {
            this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deleteGoodsCategory(id).then(res => {
                        if (res.data.success) {
                            this.$message({
                                message: '删除成功！',
                                type: 'sucess',
                                duration: 1000
                            });
                            this._refresh();
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error',
                                duration: 3000
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        handleSaveAddSmallCategory() {
            createSmallGoodsCategory({ ...this.categoryForm }).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '新增小类成功！',
                        type: 'sucess',
                        duration: 1000
                    });
                    this._refresh();
                    this.addSmallGoodsCategoryModal = false;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleSaveModifySmallCategory() {
            updateSmallGoodsCategory({ ...this.editCategoryForm }).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '修改小类成功！',
                        type: 'sucess',
                        duration: 1000
                    });
                    this._refresh();
                    this.modifySmallGoodsCategoryModal = false;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        }
    }
};
</script>

<style scoped lang="scss">
.app-container {
    /deep/ .category-container {
        margin-top: 24px;
        .card-header {
            width: 100%;
            font-size: 18px;
            .toggle-button {
                cursor: pointer;
                span {
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 8px;
                    &:last-child {
                        width: 30px;
                        height: 30px;
                    }
                }
            }
            .header-icon {
                margin-right: 12px;
            }
        }
        .card-content {
            padding-left: 80px;
            .detail-list-item {
                line-height: 36px;
                padding-bottom: 12px;
                border-bottom: 1px solid #e3e2e5;
                margin-bottom: 22px;
                &:last-child {
                    margin-bottom: 10px;
                }
                > span {
                    &:nth-child(1) {
                        margin-right: 30px;
                    }
                    &:nth-child(2) {
                        display: inline-block;
                        width: 20%;
                    }
                    &:nth-child(3) {
                        display: inline-block;
                        width: 60%;
                    }
                }
                /deep/ .el-button {
                    // float: right;
                    &:nth-child(4) {
                        margin-left: 160px;
                    }
                }
            }
        }
    }
}
</style>
